<template>
  <div class="page-container">
    <div class="in-container">
      <el-row :gutter="8">
        <el-col :span="4">
          <AppTitleBox class="app-title-box" title="类别维护">
            <template #button>
              <el-button @click="addType()" link>添加</el-button>
            </template>
            <AppPageTable
              stripe
              :data="typeTableData.data"
              @change="getList()"
              :autostyle="'height: 100%;'"
              :option="typeTableData.option"
              @singleClick="(data) => singleClickGetDetail(data)"
              :isPagination="true"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                prop="name"
                label="名称"
              />
              <el-table-column label="操作" width="90px" fixed="right">
                <template #default="scope">
                  <el-button @click="updateType(scope.row)" link
                    >编辑</el-button
                  >
                  <el-popconfirm
                    title="确定删除本条数据吗？"
                    @confirm="deleteType(scope.row)"
                  >
                    <template #reference>
                      <el-button link>删除</el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </AppPageTable>
          </AppTitleBox>
        </el-col>
        <el-col :span="20">
          <AppTitleBox class="app-title-box" title="类别详情">
            <template #button>
              <el-button
                @click="addDictDetail()"
                link
                v-show="typeDetailTableData.dictName"
                >添加</el-button
              >
            </template>
            <div v-show="typeDetailTableData.dictName" style="height: 100%">
              <AppPageTable
                stripe
                :data="typeDetailTableData.data"
                @change="getDetail()"
                :autostyle="'height: 100%'"
                :option="typeDetailTableData.option"
                :isPagination="true"
              >
                <el-table-column
                  show-overflow-tooltip
                  prop="customerNumber"
                  label="客户编号"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="abbrname"
                  label="简称"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="fullname"
                  label="全称"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="phone"
                  label="电话"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="address"
                  label="地址"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="fax"
                  label="传真"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="category"
                  label="分类"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="firstContactTime"
                  label="首次联系时间"
                  width="130"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="salePerson"
                  label="业务员"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="mainContact"
                  label="主联系人"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="dataSource"
                  label="来源"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="website"
                  label="网址"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="recordTime"
                  label="建档时间"
                  width="130"
                />
                <el-table-column
                  show-overflow-tooltip
                  prop="dictSort"
                  label="排序"
                  width="50"
                />
                <el-table-column label="操作" width="90px" fixed="right">
                  <template #default="scope">
                    <el-button @click="updateDictDetail(scope.row)" link
                      >编辑</el-button
                    >
                    <el-popconfirm
                      title="确定删除本条数据吗？"
                      @confirm="deleteTypeDetail(scope.row)"
                    >
                      <template #reference>
                        <el-button link>删除</el-button>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </AppPageTable>
            </div>
            <div v-show="!typeDetailTableData.dictName">点击类别查看详情</div>
          </AppTitleBox>
        </el-col>
      </el-row>
    </div>
  </div>
  <el-dialog
    width="500px"
    v-model="typeDialogData.show"
    :title="typeDialogData.title"
  >
    <el-form
      :model="typeData"
      :rules="typeRules"
      label-width="80px"
      ref="typeForm"
    >
      <el-form-item prop="name" label="名称">
        <el-input v-model="typeData.name"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelType" link>取消</el-button>
        <el-button type="primary" @click="submitType"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog
    width="500px"
    v-model="typeDetailDialogData.show"
    :title="typeDetailDialogData.title"
    top="50px"
  >
    <el-form
      :model="typeDetailData"
      :rules="typeDetailRules"
      label-width="100px"
      ref="typeDetailForm"
    >
      <el-form-item prop="customerNumber" label="客户编号">
        <el-input v-model="typeDetailData.customerNumber"></el-input>
      </el-form-item>
      <el-form-item prop="abbrname" label="简称">
        <el-input v-model="typeDetailData.abbrname"></el-input>
      </el-form-item>
      <el-form-item prop="fullname" label="全称">
        <el-input v-model="typeDetailData.fullname"></el-input>
      </el-form-item>
      <el-form-item prop="phone" label="电话">
        <el-input v-model="typeDetailData.phone"></el-input>
      </el-form-item>
      <el-form-item prop="address" label="地址">
        <el-input v-model="typeDetailData.address"></el-input>
      </el-form-item>
      <el-form-item prop="fax" label="传真">
        <el-input v-model="typeDetailData.fax"></el-input>
      </el-form-item>
      <el-form-item prop="category" label="分类">
        <el-input v-model="typeDetailData.category"></el-input>
      </el-form-item>
      <el-form-item prop="firstContactTime" label="首次联系时间">
        <el-date-picker
          v-model="typeDetailData.firstContactTime"
          type="date"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item prop="salePerson" label="业务员">
        <el-input v-model="typeDetailData.salePerson"></el-input>
      </el-form-item>
      <el-form-item prop="mainContact" label="主联系人">
        <el-input v-model="typeDetailData.mainContact"></el-input>
      </el-form-item>
      <el-form-item prop="dataSource" label="来源">
        <el-input v-model="typeDetailData.dataSource"></el-input>
      </el-form-item>
      <el-form-item prop="website" label="网址">
        <el-input v-model="typeDetailData.website"></el-input>
      </el-form-item>
      <el-form-item prop="recordTime" label="建档时间">
        <el-date-picker
          v-model="typeDetailData.recordTime"
          type="date"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item prop="dictSort" label="排序">
        <el-input-number
          v-model="typeDetailData.dictSort"
          :min="1"
          :max="999"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelTypeDetail" link>取消</el-button>
        <el-button type="primary" @click="submitTypeDetail"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppTitleBox from "@/components/AppTitleBox.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
export default defineComponent({
  components: {
    AppSearchForm,
    AppPageTable,
    AppTitleBox,
  },
  data() {
    return {
      //类别数据
      typeTableData: {
        data: [],
        option: useTableOption(),
      },
      //类别弹窗数据
      typeDialogData: {
        show: false,
        title: "新增类别",
      },
      //类别表单数据
      typeData: {
        name: "",
      },
      //类别表单规则
      typeRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      //详情表格数据
      typeDetailTableData: {
        id: "",
        dictName: "",
        data: [],
        option: useTableOption(),
      },
      //详情表单数据
      typeDetailData: {
        //客户编号
        customerNumber: "",
        // 简称
        abbrname: "",
        // 全称
        fullname: "",
        // 电话
        phone: "",
        // 地址
        address: "",
        // 传真
        fax: "",
        // 分类
        category: "",
        // 首次联系时间
        firstContactTime: "",
        // 业务员
        salePerson: "",
        // 主联系人
        mainContact: "",
        // 来源
        dataSource: "",
        // 网址
        website: "",
        // 建档时间
        recordTime: "",
        //排序
        dictSort: 999,
      },
      //详情表单规则
      typeDetailRules: {
        customerNumber: [
          { required: true, message: "请输入客户", trigger: "change" },
        ],
      },
      //详情弹窗数据
      typeDetailDialogData: {
        show: false,
        title: "新增字典详情",
      },
    };
  },
  methods: {
    addType() {
      this.typeData = {
        name: "",
      };
      this.typeDialogData.title = "新增类别";
      this.typeDialogData.show = true;
    },
    getList() {
      this.typeTableData.option.loading = true;
      this.$http
        .get("/api/busdict/query", {
          PageIndex: this.typeTableData.option.page,
          PageSize: this.typeTableData.option.pageSize,
        })
        .then((res) => {
          this.typeTableData.data = res.content;
          this.typeTableData.option.total = res.totalElements;
        })
        .catch((err) => {
          this.$message.error("表格数据请求失败");
        })
        .finally(() => {
          this.typeTableData.option.loading = false;
        });
    },
    updateType(data) {
      this.typeDialogData.title = "修改类别";
      this.typeData = JSON.parse(JSON.stringify(data));
      this.typeDialogData.show = true;
    },
    deleteType(data) {
      if (
        this.typeDetailTableData.id &&
        this.typeDetailTableData.id == data.id
      ) {
        this.typeDetailTableData = {
          id: "",
          dictName: "",
          data: [],
          option: useTableOption(),
        };
      }
      this.$http
        .post("/api/busdict/delete", { idArray: [data.id] })
        .then((res) => {
          if (res.status) {
            this.$message.success(res.message);
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    cancelType() {
      this.typeDialogData.show = false;
    },
    async submitType() {
      await this.$refs.typeForm.validate();
      let url = "";
      if (this.typeData.id) {
        url = "/api/busdict/edit";
      } else {
        url = "/api/busdict/create";
      }

      this.$http.post(url, this.typeData).then((res) => {
        if (res.status) {
          this.$message.success(res.message);
          this.getList();
          this.cancelType();
        } else {
          this.$message.error(res.message);
        }
      });
      this.typeDialogData.show = false;
    },
    singleClickGetDetail(data) {
      this.typeDetailTableData.id = data.id;
      this.typeDetailTableData.dictName = data.name;
      this.getDetail();
    },
    getDetail() {
      this.typeDetailTableData.option.loading = true;
      this.$http
        .get("/api/busDictDetail/query", {
          PageIndex: this.typeDetailTableData.option.page,
          PageSize: this.typeDetailTableData.option.pageSize,
          Name: this.typeDetailTableData.dictName,
        })
        .then((res) => {
          this.typeDetailTableData.data = res.content;
          this.typeDetailTableData.option.total = res.totalElements;
        })
        .finally(() => {
          this.typeDetailTableData.option.loading = false;
        });
    },
    addDictDetail() {
      this.typeDetailDialogData.title = "新增类别详情";
      this.typeDetailDialogData.show = true;
    },
    updateDictDetail(data) {
      this.typeDetailData = JSON.parse(JSON.stringify(data));
      this.typeDetailDialogData.title = "修改类别详情";
      this.typeDetailDialogData.show = true;
    },
    deleteTypeDetail(data) {
      this.$http
        .post("/api/busDictDetail/delete", { id: data.id })
        .then((res) => {
          if (res.status) {
            this.$message.success(res.message);
            this.getDetail();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    cancelTypeDetail() {
      this.typeDetailDialogData.show = false;
    },
    async submitTypeDetail() {
      await this.$refs.typeDetailForm.validate();
      let url = "";
      if (this.typeDetailData.id) {
        url = "/api/busDictDetail/edit";
      } else {
        url = "/api/busDictDetail/create";
        this.typeDetailData.dict = {
          id: this.typeDetailTableData.id,
        };
      }
      this.$http.post(url, this.typeDetailData).then((res) => {
        if (res.status) {
          this.$message.success(res.message);
          this.getDetail();
          this.cancelTypeDetail();
        } else {
          this.$message.error(res.message);
        }
      });
      this.typeDetailDialogData.show = false;
    },
  },
  watch: {
    "typeDialogData.show"(newVal) {
      if (!newVal) {
        this.$nextTick(() => {
          this.typeData = {
            name: "",
          };
          this.$refs.typeForm.resetFields();
        });
      }
    },
    "typeDetailDialogData.show"(newVal) {
      if (!newVal) {
        this.typeDetailData = {
          //客户编号
          customerNumber: "",
          // 简称
          abbrname: "",
          // 全称
          fullname: "",
          // 电话
          phone: "",
          // 地址
          address: "",
          // 传真
          fax: "",
          // 分类
          category: "",
          // 首次联系时间
          firstContactTime: "",
          // 业务员
          salePerson: "",
          // 主联系人
          mainContact: "",
          // 来源
          dataSource: "",
          // 网址
          website: "",
          // 建档时间
          recordTime: "",
          //排序
          dictSort: 999,
        };
        this.$nextTick(() => {
          this.$refs.typeDetailForm.clearValidate();
        });
      }
    },
  },
  created() {
    this.getList();
  },
});
</script>

<style lang="scss" scoped>
.el-row {
  height: 100%;
}

.app-title-box {
  height: 100%;
  box-sizing: border-box;
}
</style>
